<template>

  <div class="staData2">
    <ul class="head">
      <!-- <li class="ranking">序号</li> -->
      <li class="names">砼型号</li>
      <!-- <li class="closeRate" :class="{ close: (index + 1) % 2 != 0 }" v-for="(item, index) in HeaderData" :key="index">{{
          item
      }}
      </li> -->
      <li class="closeRate close">C10</li>
      <li class="closeRate">C15</li>
      <li class="closeRate close">C20</li>
      <li class="closeRate">C25</li>
      <li class="closeRate close">C30</li>
      <li class="closeRate">C35</li>
      <li class="closeRate close">C40</li>
      <li class="closeRate">C45</li>
      <li class="closeRate close">C50</li>
      <li class="closeRate">C55</li>
      <!-- <li class="closeRate close">C60</li> -->
      <li class="closeRate">其他</li>



    </ul>
    <vue-seamless-scroll v-if="data.length > 0" :data="data" :class-option="optionSetting" class="seamless-warp">
      <!-- :class="{on:(i+1)%2==0,off:(i+1)%2!=0}" -->
      <ul class="item">
        <li v-for="(item, i) in data" :key="i" :class="{ g: i == 2, y: i == 5 }">

          <span class="names ">
            <span class="text">{{item.name}}</span>
            <!-- <a href="javascript:void(0);" :title="item.name">{{ item.name }}</a> -->
          </span>
          <span class="closeRate close">
            <span class="text">{{ item.C10 | afterTime }}</span>
          </span>
          <span class="closeRate">
            <span class="text">{{ item.C15 | afterTime }}</span>
          </span>
          <span class="closeRate close">
            <span class="text">{{ item.C20 | afterTime }}</span>
          </span>
          <span class="closeRate">
            <span class="text">{{ item.C25 | afterTime }}</span>
          </span>
          <span class="closeRate close">
            <span class="text">{{ item.C30 | afterTime }}</span>
          </span>

          <span class="closeRate">
            <span class="text">{{ item.C35 | afterTime }}</span>
          </span>
          <span class="closeRate close">
            <span class="text">{{ item.C40 | afterTime }}</span>
          </span>
          <span class="closeRate">
            <span class="text">{{ item.C45 | afterTime }}</span>
          </span>
          <span class="closeRate close">
            <span class="text">{{ item.C50 | afterTime }}</span>
          </span>
          <span class="closeRate">
            <span class="text">{{ item.C55 | afterTime }}</span>
          </span>
          <span class="closeRate close">
            <span class="text">{{ item.other | afterTime }}</span>
          </span>


        </li>
      </ul>
    </vue-seamless-scroll>
    <div class="defaultImg" v-else>
      <Default :sv="width"></Default>
    </div>
  </div>

</template>
<script>
import Default from "@/components/default";

export default {
  props: ["commonData", "commonText"],
  data() {
    return {
      carouseId: 0,
      HeaderData: [],//表头
      data: [
      ],
      percentage: 20,
      customColor: '#409eff',
      width: "2rem",
      activeIndex: -1, //标识当前幻灯片索引
      n: 0,
      num: 0,
      c: 0,
      textArr: ["样品室", "水泥室", "力学室", "土工室"],
      flag: 0,
      //   data: ,
    };
  },
  filters: {
    getNum(e) {
      return e - 0
    },
    text(e) {
    //   var str
    //   console.log(this.flag);
    //   if (this.flag == 0) {
    //     str = e.replace(/盘/g, "方")
    //   } else if (this.flag == 1) {
    //     str = e.replace(/方/g, "盘")
    //   }
    },

    afterTime(value) {

      var str;
      if (value == undefined) {
        str = '/'
      } else if (value == 'undefined%') {
        // console.log(888);
        str = '/'
      } else if (value == 0) {

        str = '/'
      } else if (value == '0%') {

        str = '/'
      } else {
        str = value

      }
      return str

      //  let timeArr=value.split('T');

    }
    //  return timeArr[0];


  },
  components: {
    Default,
  },
  watch: {
    commonData: function (a, b) {
      this.getData();
    },
    commonText: function (a, b) {
      this.flag = a
    },
  },
  computed: {
    optionSetting() {
      return {
        step: 0.6, // 数值越大速度滚动越快
        limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length

        hoverStop: true, // 是否开启鼠标悬停stop

        direction: 1, // 0向下 1向上 2向左 3向右

        openWatch: true, // 开启数据实时监控刷新dom

        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1

        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3

        waitTime: 100, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  mounted() {
    // this.getData();
  },

  methods: {
    setActiveItem(index) {
      // console.log(index);
      this.$refs.carousel.setActiveItem(index);
    },
    // nums() {
    //   this.num = this.numText;
    // },
    aa() {
      // console.log(999);
    },
    change(pre, next) {
      this.c = pre;
      this.num = pre;
      // console.log(pre, next);
    },
    info(index) {
      //   console.log(123);
      //   console.log(index);
      // this.$emit("sonTate", 1);
      //   this.num = index;
      this.$refs.carousel.setActiveItem(index);
      //   this.change(1, 0)
    },
    getData() {

      var list = ['C10', 'C15', 'C20', 'C25', 'C30', 'C35', 'C40', 'C45', 'C50', 'C55', 'other']
      // console.log(Object.keys(this.commonData[0]));;
      this.commonData.map((item, index) => {
        // this.HeaderData.push(item.name)
        list.map(i => {
          if (index == 2) {
            item[i] = item[i] + "%"
          } else if (index == 5) {
            item[i] = item[i] + "%"
          }
        })
      })



      this.data = this.commonData



    },
  },
};
</script>
<style lang="less" scope>
.staData2 {
  height: 100%;
  width: 100%;
  padding: 0rem 0.08rem 0.05rem;
  font-size: 0.12rem;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  // .homePage {
  //   display: flex;
  //   border: 1px solid green;
  //   z-index: 50;
  //   div {
  //     width: 40px;
  //     height: 30px;
  //     border: 1px solid red;
  //     margin: 10px;
  //     line-height: 30px;
  //     //   color: #fff;
  //   }
  // }
  .head {
    display: flex;
    // background: #0a1f5c;
    // height: 0.35rem;
    height: 30px;
    // padding: 0 0.07rem;
    margin: 0;
    color: #79abef;
    // border-bottom: 2px solid #21316e;
    // line-height: 0.35rem;
    line-height: 30px;
    background: #0a1f5c;
    padding: 0;

    li {
      list-style: none;
    }

    .ranking {
      width: 8%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }

    .names {
      width: 13%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;

    }



    .closeRate {
      width: 8%;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

    }


  }

  .defaultImg {
    overflow: hidden;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .seamless-warp {
    overflow: hidden;
    flex: 1;
    color: #c9c9c9;
    // height: 2.4rem;
    height: 120px;

    ul {
      padding: 0;
      // padding-bottom: 0.05rem;
      margin: 0;
      background: rgba(1, 13, 91, 1);

      li {
        list-style: none;
        // height: 0.48rem;
        height: 32px;
        // padding: 0 0.07rem;
        display: flex;
        // line-height: 0.5rem;
        line-height: 32px;

        // border-bottom: 1px solid #21316e;
        .ranking {
          display: inline-block;
          width: 8%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: center;
        }

        .names {
          width: 13%;
          color: #c9c9c9;
          display: inline-block;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          text-align: center;

          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;

          // border-bottom: 0.01rem dashed rgba(11, 39, 120, 0.6);
          .text {
            width: 82%;

            display: flex;
            align-items: center;
            justify-content: center;

            border-bottom: 0.01rem dashed rgba(11, 39, 120, 0.6);
          }
        }


        .closeRate {
          width: 8%;
          display: inline-block;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          box-sizing: border-box;

          display: flex;
          align-items: center;
          justify-content: center;

          .text {
            width: 82%;
            // background: pink;
            display: flex;
            align-items: center;
            justify-content: center;
            // background: red;
            border-bottom: 0.01rem dashed rgba(11, 39, 120, 0.6);
          }

          // margin: 0 5px;
        }
      }
    }
  }
}

.on {
  background: #0b153d;

  //   border: 1px solid blue;
}

.off {
  background: transparent;

  //   border: 1px solid black;
}

a {
  color: #c9c9c9;
  text-decoration: none;
}

.g {
  color: #1BC98A;

}

.y {
  color: #F1B144;
}

.close {
  width: 13%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(1, 24, 107, 0.8);
}

// .color {
//   background: yellow;
//   color: red;
// }
// .nocolor {
//   color: #fff;
//   border: 1px solid tomato;
// }
</style>
